<template>
<div>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-message"></i> 设备分类列表</el-breadcrumb-item>
        </el-breadcrumb>
        </div>
        <div class="container">
            <el-button type="primary" round @click="urlAdd"><i class="el-icon-plus"> </i>&nbsp;&nbsp;新增设备分类</el-button>
            <div style="height:40px"></div>
                <el-table :data="tableData"  style="width: 100%"   ref="multipleTable">
                    <el-table-column prop="id" label="ID" width="100" align="center">
                    </el-table-column>
                    <el-table-column prop="name" label="分类名称" width="400" align="center">
                    </el-table-column>
                    <el-table-column prop="create_time" label="创建时间" width="400" align="center">
                    </el-table-column>
                    
                    <el-table-column label="操作" align="center" >
                        <template slot-scope="scope" >
                            <el-button class="edit" size="small" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button class="del" size="small" type="text"  @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <div class="pagination" v-show="totalPages>1">
                    <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
                    </el-pagination>
                </div>
                
        </div>
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
        <!-- / 删除提示框 -->
        
        </div>
</template>
<script>
import { deviceCategoryQuery, deviceCategoryDelete } from "@/api/device";
export default {
  name: "deviceCategoryQuery",
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalElements: 1, //默认总条数
      totalPages: 1, //默认总页数
      tableData: [], //表格数据
      delIndex: 0, //当前选中的下标
      delId: 0, //当前要删除的Id
      delVisible: false //默认dialog 不弹出
    };
  },
  //实例创建
  created() {
    this.getList();
  },
  //计算属性
  computed: {},
  //方法
  methods: {
    //获取设备分类列表
    getList() {
      var param = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      };
      console.log(param);
      deviceCategoryQuery(param).then(response => {
        if (response.code == 200) {
          var data = response.data; //当前返回的数据
          this.tableData = data.list; //列表数据
          this.totalElements = data.total; //总条数
          this.totalPages = Math.ceil(data.total / this.pageSize); //总页数
        } else {
          this.$notify.error({
            title: "异常",
            offset: 100,
            message: response.msg
          });
        }
      });
    },
    //路由-新增
    urlAdd() {
      this.$router.push({ path: "/device/category/add" });
    },
    //分页
    handleCurrentChange(val){
        this.pageIndex =val;
        this.getList();
    },
    //编辑
    handleEdit(index, row) {
      if (row.id && row.id > 0) {
        //跳转到商品编辑
        this.$router.push({
          path: "/device/category/edit",
          query: { id: row.id }
        });
      }
    },
    //删除
    handleDelete(index, row) {
      // console.log(index,row.id);
      if (row.id && row.id > 0) {
        this.delIndex = index; //要删除的下标
        this.delId = row.id; //要删除的ID
        this.delVisible = true; //显示兑换弹出框
        //console.log(this.delVisible);
      } else {
        // console.log("没触发");
      }
    },
    // 确定删除
    deleteRow() {
      //console.log(this.delId)
      if (this.delId > 0) {
        console.log(this.delId);
        let param = {};
        param.delId = this.delId;
        deviceCategoryDelete(param).then(response => {
          console.log(response);
          if (response.code == 200) {
            this.tableData.splice(this.delIndex, 1);
            this.$message.success("删除成功");
            this.delVisible = false;
          } else {
            this.$notify.error({
              title: "删除失败",
              duration: 2000,
              message: "失败原因：" + response.data.msg
            });
          }
        });
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.edit {
    color: #ff9800;
}

.del {
    color: #e51c23;
}

.download {
    color: #67C23A;
}
</style>


